<style>
  .el-tabs__item {
    font-size: 18px;
    font-weight: 700;
    color: #000;
  }
</style>
<template>
  <div class="create-container">
    <div class="right-container">
      <!---->
      <el-form :inline="true" status-icon label-position="right" class="demo-form-inline"
               label-width="150px" style="width:66%;">
        <el-form-item label="签约银行名称：" prop="bankCode">
          <!--<el-input v-model="listQuery.bankCode" placeholder="签约银行代码"/>-->
          <el-select v-model="listQuery.bankCode" placeholder="请选择">
            <el-option value="0000" label="富民银行">富民银行</el-option>
            <el-option value="0001" label="网商银行">网商银行</el-option>
            <el-option value="0002" label="振兴银行">振兴银行</el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="queryList">查询</el-button>
          <el-button class="filter-item" type="primary" icon="el-icon-plus"
                     @click="handleAdd">添加渠道参数
          </el-button>
        </el-form-item>
      </el-form>
      <el-dialog :visible.sync="editDialogVisible" title="渠道参数设置" :close-on-click-modal="false" :append-to-body="true">
        <el-form ref="editForm" :model="editForm" label-position="right" class="demo-table-expand" label-width="150px" style="display: flex">
          <div style="flex: 1">
            <el-form-item label="签约银行名称：">
              <!--<el-input v-model="listQuery.status"/>-->
              <el-select v-model="editForm.bankCode" placeholder="请选择">
                <el-option value="0000" label="富民银行">富民银行</el-option>
                <el-option value="0001" label="网商银行">网商银行</el-option>
                <el-option value="0002" label="振兴银行">振兴银行</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="返佣比例：" style="width: 90%">
              <el-input v-model="editForm.commList.perBP" placeholder="返佣比例"/>
            </el-form-item>
            <el-form-item label="金额最小值（元）：" style="width: 90%">
              <el-input v-model="editForm.commList.minMoney" placeholder="金额最小值"/>
            </el-form-item>
            <el-form-item label="金额最大值（元）：" style="width: 90%">
              <el-input v-model="editForm.commList.maxMoney" placeholder="金额最大值"/>
            </el-form-item>
          </div>
          <div style="flex: 1">
            <el-form-item label="开始日期：" prop="startDate">
              <el-date-picker
                v-model="editForm.commList.startDate"
                type="date"
                placeholder="开始日期"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="结束日期：" prop="endDate">
              <el-date-picker
                v-model="editForm.commList.endDate"
                type="date"
                placeholder="结束日期"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="是否针对首贴：" prop="isFirst">
              <el-radio v-model="editForm.commList.isFirst" :label="0">所有</el-radio>
              <el-radio v-model="editForm.commList.isFirst" :label="1">针对首贴</el-radio>
            </el-form-item>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="doCreate">确定</el-button>
        </div>
      </el-dialog>

      <div style="display: flex;width: 100%;">
        <el-tabs type="border-card" style="width: 100%">
          <el-tab-pane
            v-for="item in list"
            :key="item.name"
            :name="item.name"
            :label="item.bankCode | bankCodeFilter">
            <el-table v-loading="list1Loading" :data="item.commList" ref="cargoTable" element-loading-text="正在查询中。。。" border fit highlight-current-row
                      :header-cell-style="{background:'#F2F2F2',color:'#666'}">
              <el-table-column align="left" min-width="100" label="签约银行" prop="bankCode">
                <template slot-scope="scope">
                  {{ { "0000":"富民银行", "0001":"网商银行", "0002":"振兴银行" }[ scope.row.bankCode] }}
                </template>
              </el-table-column>
              <el-table-column align="left" min-width="120" label="金额最小值（元）" prop="minMoney"/>
              <el-table-column align="left" min-width="120" label="金额最小值（元）" prop="maxMoney"/>
              <el-table-column align="left" min-width="120" label="开始日期" prop="startDate"/>
              <el-table-column align="left" min-width="120" label="结束日期" prop="endDate"/>
              <el-table-column align="left" min-width="100" label="是否针对首贴" prop="isFirst">
                <template slot-scope="scope">
                  {{ { "0":"所有", "1":"针对首贴"}[ scope.row.isFirst] }}
                </template>
              </el-table-column>
              <el-table-column align="left" min-width="100" label="返佣比例 (%)" prop="perBP"/>
              <el-table-column align="left" min-width="120" label="设置时间" prop="addTime"/>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
      <!--pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize"
                  @pagination="queryList" style="margin: 0"/>-->

    </div>
  </div>
</template>

<script>
import {doGet, doPost} from '@/api'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

export default {
  name: 'usersearch',
  components: { Pagination },
  filters: {
    bankCodeFilter(val) {
      return { '0000': '富民银行', '0001': '网商银行', '0002': '振兴银行' }[val]
    }
  },
  data() {
    return {
      list: [],
      list1: [],
      total: 0,
      listQuery: {
        /*pageNum: 1,
         pageSize: 20,*/
        bankCode: undefined
      },
      editForm: {
        bankCode: undefined,
        commList: {
          bankCode: undefined,
          minMoney: undefined,
          maxMoney: undefined,
          startDate: undefined,
          endDate: undefined,
          isFirst: undefined,
          perBP: undefined
        }
      },
      listLoading: true,
      list1Loading: false,
      editDialogVisible: false,
      listedit: []
    }
  },
  created() {
    this.queryList()
  },
  methods: {
    queryList() {
      this.listLoading = true
      doGet('bankcomm.html?op=search', this.listQuery).then(response => {
        this.list = response.rows
        this.listLoading = false
      }).catch(() => {
        this.list = []
        this.listLoading = false
      })
    },
    handleAdd() {
      this.editForm = {
        bankCode: undefined,
        commList: {
          bankCode: undefined,
          minMoney: undefined,
          maxMoney: undefined,
          startDate: undefined,
          endDate: undefined,
          isFirst: 0,
          perBP: undefined
        }
      },
      this.editDialogVisible = true
      this.$nextTick(() => {
        this.$refs['editForm'].clearValidate()
      })
    },
    doCreate() {
      this.$refs['editForm'].validate(valid => {
        if (valid) {
          this.editForm.commList.bankCode = this.editForm.bankCode
          let list = []
          list.push(this.editForm.commList)
          let add = JSON.stringify(list)
          let fd = new FormData()
          fd.append('bankCode', this.editForm.bankCode)
          fd.append('commList', add)
          fd.append('op', 'bankset')
          doPost('bankcomm.html', fd).then(response => {
            this.queryList()
            this.$notify.success({
              title: '成功',
              message: '渠道参数添加成功'
            })
            this.editDialogVisible = false
          }).catch(response => {
            this.$notify.error({
              title: '失败',
              message: response.message
            })
            this.editDialogVisible = false
          })
        }
      })
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
